<!DOCTYPE html>
<html lang="cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>index</title>
</head>
<link rel="shortcut icon" href="farvirate.png">
<link rel="apple-touch-icon" href="farvirate.png" />
<link href="https://cdn.bootcss.com/minireset.css/0.0.2/minireset.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/toastr.js/latest/css/toastr.min.css" rel="stylesheet">
<style>
    * {
        font-size: 16px;
    }

    html,
    body,
    #app {
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    body {
        padding: 20px;
    }

    .row-1,
    .login {
        text-align: center;
    }

    .login {
        position: fixed;
        bottom: 20px;
        width: 100%;
        text-align: center;
        box-sizing: border-box;
        left: 0;
        z-index: 9;
    }

    .download {
        padding: 20px;
        text-align: center;
    }

    img {
        width: 50px;
    }

    .group {
        margin-bottom: 20px;
        display: flex;
        height: 50px;
        line-height: 50px;
    }

    .app-img {
        width: 60px;
    }

    .app-name {
        flex: 1;
        line-height: 50px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
    }

    .updata-task-btn {
        margin-bottom: 20px;
    }

    .download a,
    .login {
        font-size: 30px;
        line-height: 30px;
        margin-bottom: 20px;
    }

    .copy-input {
        position: absolute;
        bottom: -933px;
        left: 0;
        opacity: 0;
        z-index: -10;
    }
</style>

<body>
    <div id="app">
        <input type="text" id="copy-input" class="copy-input" v-model="data.app_name">
        <p class="row-1">
            <button class="updata-task-btn" @click="updataTask">
                <span v-if="loadingText">{{loadingText}}</span>
                <span v-else>更新任务</span>
            </button>
        </p>
        <template v-if="loadingText===''&&data.app_name">
            <div class="group group-1">
                <span class="app-img"><img :src="data.app_icon" alt=""></span>
                <span class="app-name">{{data.app_name}}</span>
                <!-- <a href="javascript:;" @click="onCopy"  class="copy-btn">点击复制</a> -->
            </div>
            <a :href="data.newAppSrc">
                    <div class="group group-2">
                            <span class="app-img"><img :src="data.newAppImg" alt=""></span>
                            <span class="app-name">{{data.newAppName}}</span>
                        </div>
            </a>
            <p class="download" v-if="data.newAppSrc"><a class="" :href="data.newAppSrc">下载地址</a></p>
        </template>
        <p class="login">
            <button @click="onLogin">登录</button>
        </p>
    </div>
</body>
<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/js-cookie/latest/js.cookie.min.js"></script>
<script src="https://cdn.bootcss.com/toastr.js/latest/js/toastr.min.js"></script>
<script src="https://cdn.bootcss.com/vue/2.5.22/vue.js"></script>
<script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js"></script>
<script>
    axios.defaults.withCredentials = true; //让ajax携带cookie
    let vm = new Vue({
        el: '#app',
        data: {
            api: 'http://10.10.61.153:3000',
            msg: '666',
            list: [],
            tasks: [],
            data: {
                oldAppName: '',
                oldAppImg: '',
                newAppName: '',
                newAppImg: '',
                newAppSrc: ''
            },
            loading: false,
            loadingText: '',
            userName: '',
            qianKaCookie: ''
        },
        created() {
            this.userName = Cookies.get('userName')
            this.qianKaCookie = Cookies.get('qianKaCookie')
            this.autoApplyTask=Cookies.get('autoApplyTask')
            if (!this.qianKaCookie) {
                location.href = "/login"
            }
        },
        methods: {
            onCopy(text) {
                var input = document.getElementById("copy-input");
                input.select(); // 选中文本
                document.execCommand("copy"); // 执行浏览器复制命令
            },
            updataTask() {
                let that = this;
                this.loading = true;
                this.loadingText = '更新中...'
                $.ajax({
                    url: that.api + '/updataTask',
                    data: {
                        cookie: that.qianKaCookie,
                        userName: that.userName,
                        autoApplyTask:that.autoApplyTask
                    },
                    type: 'get',
                    success(res) {
                        if (res.code && res.code === 4001) {
                            toastr.error('请重新登录')
                            setTimeout(() => {
                                location.href = '/login'
                            }, 500)
                        } else {
                            if (res.app_name) {
                                that.data = res
                            } else if (res.message === 0) {
                                toastr.success('没有获取到任务')
                            } else {
                                toastr.error(JSON.stringify(res))
                                that.data = {}
                            }

                            if (res.code === 404) {
                                toastr.error(res.message)
                            }
                            console.log(that.data)
                            that.loading = false;
                            that.loadingText = ''
                        }

                    },
                    error(err) {
                        that.loading = false;
                        that.loadingText = ''
                        console.log(err)
                        toastr.error(err)
                    }
                })
            },
            onLogin() {
                location.href = "/login"
            }
        },
        filters: {

        }
    });
</script>

</html>
